<template>
  <div>
    <el-card class="box-card">
      <el-button
        class="btn-add"
        @click="AdddialogVisible=true"
        size="mini">
        添加
      </el-button>
      <massage-add v-if="AdddialogVisible" :visible.sync="AdddialogVisible" :admin="admin" :closeAdd="closeAdd" :init="initialize"></massage-add>
      <el-input v-model="query" placeholder="请输入名称" size="mini"  :style="{width:'200px'}"></el-input>
      <el-button
        class="btn-delete"
        @click="queryName"
        size="mini">
        查询
      </el-button>
    </el-card>
      <el-table
        :data="tableData"
        style="width: 100%;text-align: center">
        <el-table-column width="180"
          prop="templateName"
          label="模板名称">
        </el-table-column>
        <el-table-column
          prop="templateContent"
          label="模板内容"
          width="180">
        </el-table-column>
        <el-table-column
          prop="templateType"
          label="模板类型"
          width="180">
          <template slot-scope="scope">
            <span>{{type[scope.row.templateType]}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="templdateExplain"
          label="模板申请说明"
          width="180">
        </el-table-column>
        <el-table-column width="180"
          prop="templateStatus"
          label="状态">
          <template slot-scope="scope">
            <span>{{status[scope.row.templateStatus]}}</span>
<!--            <span v-else-if="scope.row.templateStatus==1" style="color: #08af51">{{status[1]}}</span>
            <span v-else="scope.row.templateStatus==2" style="color: #8c939d">{{status[2]}}</span>
            <span v-else="scope.row.templateStatus==3" style="color: #8c939d">{{status[3]}}</span>-->
          </template>
        </el-table-column>
        <el-table-column width="180"
                         prop="templateParam"
                         label="模板参数">
        </el-table-column>
        <el-table-column width="180"
          prop="tepmlateCreateUser"
          label="创建人">
          <!--          字段待定-->
        </el-table-column>
        <el-table-column
          prop="templateCreateTime"
          label="创建时间" width="180">
        </el-table-column>
        <el-table-column width="180"
          prop="templateUpdateUser"
          label="更新人"  style="position: relative;z-index: 999">
        </el-table-column>
        <el-table-column width="180"
          prop="templateUpdateTime"
          label="更新时间"  style="position: relative;z-index: 999" >
        </el-table-column>
        <el-table-column
          prop="operation"
          label="操作" width="180">
          <template slot-scope="scope">
            <span class="wrapper">
              <el-button
                size="mini"
                type="warning"
                @click="disable(scope.row)">停用</el-button>
            </span>
            <span class="wrapper" v-if="scope.row.templateStatus==3">
              <el-button
                size="mini"
                type="warning"
                @click="disable(scope.row)">重新提交</el-button>
            </span>
          </template>
        </el-table-column>
      </el-table>
  </div>
</template>

<style>
.el-table td, .el-table th {

  text-align: center;
}
</style>

<script>
import axios from "axios"
import Cookie from "js-cookie"
import massageAdd from "./massageAdd"
export default {
  data () {
    return {
      tableData: [],
      AdddialogVisible:false,
      UpdatedialogVisible:false,
      dict:{},
      selectCheckBox:[],
      query:'',
      admin:{},
      type:["验证码","短信通知","推广短信","国际/港澳台消息"],
      status:["审核中","通过","停用","驳回"]
    }
  },
  methods:{
    //初始化方法
    initialize(){
      var admin = Cookie.get("admin")
      this.admin=JSON.parse(admin);
      axios.get("http://localhost:8103/shortMessage").then((data)=> {
        console.log(data)
        this.tableData = data.data.data;
      });
    },
    disable(row){
      console.log(row,"停用")
      axios.put("http://localhost:8103/shortMessage",{
        messageId: row.messageId,
        templateStatus: 2
      }).then((data)=>{
        axios.get("http://localhost:8103/shortMessage").then((data)=> {
          this.tableData = data.data.data.records;
        });
      })
    },
    //关闭添加弹窗
    closeAdd(){
      this.AdddialogVisible=false;
    },
    //修改状态
    updateStatus(id,status){
      axios.put("http://localhost:8102/dict",{
        id:id,
        delFlag:status
        }
      ).then((data)=>{
        console.log(data)
      });
    },


    dictUpdateMtehod(row){
      this.dict=row;
      this.UpdatedialogVisible=true;
    },
    //关闭编辑弹窗
    closeUpdate(){
      this.UpdatedialogVisible=false;
    },
    //查询
    queryName(){
      if(this.query!=""&&this.query!=null){
        axios.get("http://localhost:8102/dict/queryName?name="+this.query).then((data)=>{
          this.tableData=data.data;
        })
      }else{
        this.initialize();
      }
    },
    //移除数组方法
    removeWithoutCopy(arr, item) {
      for(var i = 0; i < arr.length; i++){
        if(arr[i].id == item){
          //splice方法会改变数组长度，当减掉一个元素后，后面的元素都会前移，因此需要相应减少i的值
          arr.splice(i,1);
          i--;
        }
      }
      return arr;
    },
  },
  mounted () {
    this.initialize();
  },
  components:{
      "massage-add":massageAdd
  }

}
</script>
